<template>
  <el-dialog ref="dialogDialog" class="c-dialog-fixed" v-model="dialogVisible" width="700px" title="菜单权限"
    :append-to-body="inDialog" @closed="handleClosed">
    <el-table :data="data" v-loading="loading" border stripe row-key="id" default-expand-all>
      <el-table-column prop="name" label="菜单名称" min-width="150">
        <template #default="{ row }">
          {{ row.name }}
          <span class="c-text-grey" v-show="row.isPage">（子页面）</span>
        </template>
      </el-table-column>
      <el-table-column width="300" label="菜单权限">
        <template #default="{ row }">
          <el-tag v-for="p in row.permissions" :key="p.code" style="margin-right:5px">{{ p.name }}</el-tag>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>
<script setup>

import api from "@/api/sys/role";
import { ref, useTemplateRef } from "vue"
import { toTreeData } from "@/utils/common";


const data = ref([]);
const dialogVisible = ref(false)
const loading = ref(false)

const dialogRef = useTemplateRef("dialogDialog")

const handleClosed = () => {
  data.value.length = 0
}
const openByRoleId = async (roleId) => {
  dialogVisible.value = true
  loading.value = true
  const res = await api.getRoleMenuPermissionList(roleId)
  loading.value = false
  if (res.code != 0) {
    return
  }
  data.value = toTreeData(res.data);
}
defineExpose({
  openByRoleId
})
</script>